import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:smart_lam/routes/app_pages.dart';
import 'package:smart_lam/widget/BlackBg.dart';
import 'package:smart_lam/widget/flutter_circle_color_picker.dart';
import 'dart:math' as math;
import 'lamp_controller.dart';

class LampPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget lamp(
        {double? left,
        double? right,
        required Color color,
        required double xAngle}) {
      return Positioned(
        left: left,
        right: right,
        bottom: 0,
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001)
            ..rotateX(-math.pi / 6),
          child: Container(
            alignment: Alignment.center,
            width: ScreenUtil().setWidth(120),
            height: ScreenUtil().setWidth(120),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                ScreenUtil().setWidth(120),
              ),
              gradient: RadialGradient(
                center: Alignment(0, 0),
                radius: 0.60,
                colors: <Color>[
                  color.withOpacity(0.80),
                  color.withOpacity(0.30),
                  color.withOpacity(0.04)
                ],
                stops: [0.0, 0.6, 0.8],
              ),
            ),
          ),
        ),
      );
    }

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: IconButton(
          icon: Icon(
            Icons.keyboard_backspace_outlined,
            color: Colors.white,
            size: ScreenUtil().setSp(24),
          ),
          onPressed: () {
            Get.offNamed<void>(Routes.home);
          },
        ),
        automaticallyImplyLeading: false,
        toolbarHeight: ScreenUtil().setHeight(44),
      ),
      body: GetBuilder<LampController>(
        builder: (_) {
          return Stack(
            alignment: AlignmentDirectional.center,
            children: [
              BlackBg(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Container(
                      alignment: Alignment.center,
                      height: ScreenUtil().setHeight(300),
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Image.asset(
                            'assets/image/car_box.png',
                            width: Get.width,
                          ),
                          lamp(
                            left: ScreenUtil().setWidth(80),
                            color: _.colorController!.color,
                            xAngle: -math.pi / 6,
                          ),
                          lamp(
                            right: ScreenUtil().setWidth(80),
                            color: _.colorController!.color,
                            xAngle: -math.pi / 6,
                          ),
                          Image.asset(
                            'assets/image/board.png',
                            width: Get.width,
                          ),
                          Image.asset(
                            'assets/image/seat.png',
                            width: Get.width,
                          ),
                        ],
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      height: ScreenUtil().setHeight(Get.height - 364),
                      child: CircleColorPicker(
                        size: Size(ScreenUtil().setHeight(240), ScreenUtil().setHeight(240)),
                        controller: _.colorController,
                        onChanged: (color) {
                          print(color);
                        },
                        onEnded: (color) {
                          _.onChanged(color);
                          print(color);
                        },
                        strokeWidth: ScreenUtil().setHeight(12),
                        thumbSize: ScreenUtil().setHeight(24),
                      ),
                    )
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}
